import React,{Component} from 'react';
import CSSModules from 'react-css-modules';
import styles from './welfare.scss';
import axios from 'axios';
import {Navgaitor,Banner} from '../../../components';
import { fetchList } from './welfare';





class Welfare extends Component {

    

    
    constructor(props) {
        super(props);
        this.state = {welfarelist: []};
      }

    
    componentDidMount(){
        var url=`http://47.92.98.104:8080/zhuiying/findAllWelfare`;
            axios({
                url:url,
                method:'get'
            }).then(res=>{
                console.log(res)
                this.setState({
                    welfarelist:res.data
                })
            }); 
    }

    showLists(){
        var jsx=[];
        if(this.state.welfarelist!=''){
            for(var i=0;i<6;i++){
                jsx.push(
                    <li styleName="welfare-item" className="clearfix" key={i}>
                    <dl className="clearfix">
                        <dt>
                            <a href="#">
                                <img src={this.state.welfarelist[i].pimage}/>
                            </a>
                        </dt>
                        <dd>
                            <a href="#">
                                <h3>{this.state.welfarelist[i].phead}</h3>
                                <p>{this.state.welfarelist[i].pcontent}</p>
                                <span>活动时间：
                                    <i>{this.state.welfarelist[i].pdata}</i>
                                </span>
                                <div>我要参加</div>
                            </a>
                        </dd>
                    </dl>
                </li>
                )
            }
        }
        return jsx;
    }

    render(){
 
        return <div styleName="vip-welfare">
            <Banner/>
            <Navgaitor/>
            <div styleName="welfare-content">
                
                <div styleName="w-wrapper">
                    
                    <ul styleName="welfare-list">
                        {this.showLists()}
                    </ul>
                    <div styleName="more" className="wrapper">
                        <div styleName="look-more">
                            <a href="#">查看更多</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    }
}

export default CSSModules(Welfare, styles,{allowMultiple:true});